/*初始化css*/
HTML,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
blockquote,
pre,
form,
fieldset,
table,
th,
td {
  border: none;
  font-family: "微软雅黑";
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

@font-face {
  font-family: "digital";
  src: url("DS-DIGI.TTF");
}

html,
body {
  height: 100%;
  width: 100%;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ul,
li {
  list-style: none;
}

.width100 {
  width: 100%;
}

.height100 {
  height: 100%;
}

.container {
  background: url(../images/bg.png) center center;
  background-size: 100% 100%;
  height: 100%;
  min-width: 1360px;
  min-height: 760px;
  box-sizing: border-box;
}

.header-con {
  height: 81px;
  position: relative;
}

.all-title-bg {
  background-image: url("../images/head-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  height: 100%;
}

.main-con {
  display: flex;
  height: calc(100% - 100px);
  padding: 0 15px 18px;
  width: calc(100% - 30px);
}

.left-area {
  height: 100%;
  width: 24.2%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.right-area {
  height: 100%;
  width: 24.2%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.left-box-one {
  height: 19.33%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.left-box-one > .item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.left-box-one > .item > .item-top {
  background: url(../images/left-one-big.png) center 70% no-repeat;
  background-size: 5.8vw 8.1vh;
  width: 100%;
  height: 73%;
}

.left-box-one > .item > .item-top > .one {
  background: url(../images/left-one-small-one.png) center 80% no-repeat;
  background-size: 1.62vw 3.7vh;
  width: 100%;
  height: 73%;
}

.left-box-one > .item > .item-top > .two {
  background: url(../images/left-one-small-two.png) center 80% no-repeat;
  background-size: 2.4vw 3.43vh;
  width: 100%;
  height: 73%;
}

.left-box-one > .item > .item-top > .three {
  background: url(../images/left-one-small-three.png) center 80% no-repeat;
  background-size: 2.08vw 3.7vh;
  width: 100%;
  height: 70%;
}

.left-box-one > .item > .item-bottom {
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.left-box-one > .item > .item-bottom > p:nth-child(1) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1rem;
  color: #ffffff;
}

.left-box-one > .item > .item-bottom > p:nth-child(2) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1.25rem;
  color: #19d6ff;
}

.right-box-one {
  height: 33.33%;
  position: relative;
  box-sizing: border-box;
}

.box-one-content {
  width: 100%;
  height: calc(100% - 47px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  color: #ffffff;
}

.box-one-content > .left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-one-content > .left > .top {
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-image: url("../images/out-blue.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 65% 73%; */
}

.box-one-content > .left > .bottom {
  width: 50%;
  height: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-one-content > .right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-one-content > .right > .top {
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  /* background-image: url("../images/out-cyan.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 7.58vw 13.89vh; */
}

.box-one-content > .right > .bottom {
  width: 50%;
  height: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-one-content > .left > .top > p,
.box-one-content > .right > .top > p {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.box-one-content > .left > .bottom > p,
.box-one-content > .right > .bottom > p {
  width: 100%;
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1rem;
  color: #ffffff;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  white-space: nowrap; /* 禁止文本换行 */
}

.left-box-two {
  height: 80.66%;
  position: relative;
  box-sizing: border-box;
}

.left-box-two > .box-two-main {
  width: calc(100% - 1.041vw); /* 20 */
  margin: 1.852vh 0.26vw 1.852vh 0.781vw; /* 20 5 20 15 */
  box-sizing: border-box;
  height: calc(100% - 8.056vh); /* 87 */
  padding: 2.778vh 1.302vw 4.907vh; /* 30 25 53 */
  background: url(../images/left-two-box.png) center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: #ffffff;
}

.left-box-two > .box-two-main > .item {
  flex: 1;
  width: calc(100% - 50px);
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      rgba(0, 138, 255, 0),
      rgba(0, 138, 255, 0.98),
      rgba(0, 138, 255, 0.08)
    )
    10;
}

.left-box-two > .box-two-main > .item > .item-left {
  width: 3.39vw;
  height: 5.37vh;
}

.left-box-two > .box-two-main > .item > .item-left > img {
  width: 100%;
  height: 100%;
}

.left-box-two > .box-two-main > .item > .item-right {
  margin-left: 10px;
  height: 5.37vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.left-box-two > .box-two-main > .item > .item-right > p:nth-child(1) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 0.875rem;
  color: #c8d6e7;
}

.left-box-two > .box-two-main > .item > .item-right > p:nth-child(1) > span {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 0.875rem;
  color: #19d6ff;
}

.left-box-two > .box-two-main > .item > .item-right > p:nth-child(2) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 0.875rem;
  color: #c8d6e7;
}

.left-box-two
  > .box-two-main
  > .item
  > .item-right
  > p:nth-child(2)
  > span:nth-child(1) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1.5rem;
  color: #1aacff;
}

.right-box-two {
  height: 66.66%;
  position: relative;
  box-sizing: border-box;
}

.right-box-two > .box-two-content {
  width: calc(100% - 20px);
  height: calc(100% - 77px);
  display: flex;
  flex-direction: column;
  margin: 10px 5px 20px 15px;
}

.right-box-two > .box-two-content > .item {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background: rgba(0, 72, 152, 0.38);
  box-shadow: 0px 1px 0px 0px #5684b7;
}

.right-box-two > .box-two-content > .item > .item-middle {
  width: 50%;
  margin-left: 2%;
}

.right-box-two > .box-two-content > .item > .item-middle > p:nth-child(1) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1rem;
  color: #ffffff;
}

.right-box-two > .box-two-content > .item > .item-middle > p:nth-child(2) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 0.875rem;
  color: #c6c6c6;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  white-space: nowrap; /* 禁止文本换行 */
}

.right-box-two > .box-two-content > .item > .item-right {
  flex: 1;
  width: 37%;
}

.right-box-two > .box-two-content > .item > div:nth-child(1) {
  position: relative;
  width: 12%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-box-two > .box-two-content > .item > .active-box {
  position: relative;
  width: 12%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-box-two > .box-two-content > .item > div:nth-child(1) > img {
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

.right-box-two > .box-two-content > .item > div:nth-child(1) > span {
  display: flex;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: #334a6b;
  justify-content: center;
  align-items: center;
}

.right-box-two > .box-two-content > .item > div:nth-child(1) > .active {
  width: 48px;
  height: 36px;
  margin-left: 0px !important;
  position: absolute;
  top: 50%;
  transform: translate(0, -35%);
}

.card-title {
  background: url(../images/card-title-bg.png) center top no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 47px;
  line-height: 47px;
  display: flex;
  flex-direction: row;
}

.card-title-text {
  margin-left: 11%;
  margin-right: 5px;
  margin-bottom: 2%;
  font-size: 1.125rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f6f9fe;
  font-style: italic;
  letter-spacing: 2px;
}

.middle-area {
  flex: 1;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

.area-card {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.middle-area-right {
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translate(-50%, 0);
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 2rem;
  color: #ffffff;
  width: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  letter-spacing: 4px;
}

.middle-area-right > p {
  display: inline-block;
  width: 3.021vw;
  height: 6.944vh;
  background: url("../images/number.png") center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-area-right > p > span {
  font-family: DINPro;
  font-weight: 500;
  font-size: 3rem;
  color: #ffffff;
  background: linear-gradient(0deg, #3fa4f6 0%, #f7fdff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.map {
  position: relative;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../images/ring.png");
  background-size: 100% 58%;
  background-position: 20px 104%;
  background-repeat: no-repeat;
  z-index: 999999;
  width: 100%;
  height: calc(100% - 100px);
}

.map-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 26vh;
  z-index: 99;
  background-image: url("../images/middle-bg.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.map-data {
  position: relative;
  width: 100%;
  height: 15.51vh;
  left: 0;
  top: 68%;
  z-index: 1;
  color: #ffffff;
}

.first-line {
  position: absolute;
  top: -6px;
  left: 20%;
  width: 60%;
  z-index: 999999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.common-line > .item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.common-line > .item > div:nth-child(2) {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 1.125rem;
  margin-top: -1.667vh;
}

.common-line > .item > div:nth-child(2) > p:nth-child(1) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 0.875rem;
  color: #e2f0fc;
}

.common-line > .item > div:nth-child(2) > p:nth-child(2) {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 1.125rem;
  color: #19d6ff;
}

.common-line > .item > img {
  width: 6.771vw;
  height: 11.389vh;
}

.two-line {
  position: absolute;
  top: 3%;
  left: 34%;
  width: 32%;
  z-index: 999999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
